<template>
  <div>
    <a-collapse :default-active-key="[1, 2, 3, 4]" :bordered="false">
      <a-collapse-item header="按钮设置" :key="2">
        <div class="chooseBox">
          <p class="titles">刷新图片</p>
          <a-upload
            action="/app/file/upload"
            :show-file-list="false"
            @success="onSuccessBgImage3($event)"
            @error="errorBgImage3($event)"
            :image-preview="true"
          >
            <template #upload-button>
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="currentTemp.reloadImageUrl"
              >
                <img
                  style="display: block; width: 80px; height: 80px"
                  :src="currentTemp.reloadImageUrl"
                />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </div>

        <div class="chooseBox">
          <p class="titles">退出图片</p>
          <a-upload
            action="/app/file/upload"
            :show-file-list="false"
            @success="onSuccessBgImage2($event)"
            @error="errorBgImage2($event)"
            :image-preview="true"
          >
            <template #upload-button>
              <div
                class="arco-upload-list-picture custom-upload-avatar"
                v-if="currentTemp.outmageUrl"
              >
                <img
                  style="display: block; width: 80px; height: 80px"
                  :src="currentTemp.outmageUrl"
                />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </div>
      </a-collapse-item>
      <a-collapse-item header="间距(px)" :key="2">
        <div class="sliderBox">
          <p>上边距</p>
          <a-slider
            v-model="currentTemp.paddingTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下边距</p>
          <a-slider
            v-model="currentTemp.paddingBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>左右边距</p>
          <a-slider
            v-model="currentTemp.paddingTwice"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="圆角设置(px)" :key="3">
        <div class="sliderBox">
          <p>上圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="背景设置" :key="4">
        <div class="chooseBox">
          <p class="title">展示类型</p>
          <div class="radioBox">
            <a-radio-group v-model="currentTemp.showType">
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">颜色</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">图片</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="uploadBox" style="margin-bottom: 10px" v-if="currentTemp.showType == 2">
          <a-upload
            action="/app/file/upload"
            :show-file-list="false"
            @success="onSuccessBgImage3($event)"
            @error="errorBgImage3($event)"
            :image-preview="true"
          >
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="currentTemp.bgImage">
                <img style="display: block; width: 80px; height: 80px" :src="currentTemp.bgImage" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </div>

        <div class="sliderBox_color2" v-if="currentTemp.showType == 1">
          <p style="width: 100%; margin-bottom: 5px">填充颜色</p>
          <div
            style="
              width: 40px;
              height: 40px;
              cursor: pointer;
              border: 6px solid #f5f5f5;
              border-radius: 4px;
            "
            :style="{ backgroundColor: currentTemp.boxBg }"
            @click="changSketch3"
          ></div>

          <Sketch
            class="setColor"
            v-model="currentTemp.boxBg"
            :show="colorForm.showSketchBg"
            @changButton="changSketchBg"
          />

          <a-button type="text" style="margin-left: 12px" @click="currentTemp.boxBg = '#ffffff'"
            >重置</a-button
          >
        </div>
        <div class="sliderBox_color2">
          <p style="width: 100%; margin-bottom: 5px">字体颜色</p>

          <div
            style="
              width: 40px;
              height: 40px;
              cursor: pointer;
              border: 6px solid #f5f5f5;
              border-radius: 4px;
            "
            :style="{ backgroundColor: currentTemp.textColor }"
            @click="changSketch4"
          ></div>

          <Sketch
            class="setColor"
            v-model="currentTemp.textColor"
            :show="colorForm.showSketchFont"
            @changButton="changSketchFont"
          />

          <a-button type="text" style="margin-left: 12px" @click="currentTemp.textColor = '#000'"
            >重置</a-button
          >
        </div>
      </a-collapse-item>
    </a-collapse>
    <a-modal
      v-model:visible="tagvisible"
      @before-close="handleCancelTag"
      title="选择链接"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userFormTag" :auto-label-width="true" :model="subForm">
        <a-form-item field="type" label="链接类型">
          <a-select v-model="subForm.type" placeholder="请选择链接类型" allow-clear>
            <a-option v-for="(item, index) in typeLists" :key="index" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="subForm.type == 1"
          label="跳转链接"
          field="links"
          :rules="[
            { required: true, message: '跳转链接不能为空' },
            { minLength: 1, maxLength: 100, message: '跳转链接必须小于100个字符' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.links" placeholder="请输入跳转链接" allow-clear />
        </a-form-item>
        <a-form-item
          v-if="subForm.type == 2"
          field="links"
          :rules="[
            { required: true, message: '跳转链接不能为空' },
            { minLength: 1, maxLength: 100, message: '跳转链接必须小于100个字符' },
          ]"
          label="系统功能"
        >
          <a-select v-model="subForm.links" placeholder="请选择系统功能" allow-clear>
            <a-option v-for="(item, index) in linkLists" :key="index" :value="item.path">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelTag">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkLink">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { Sketch } from '@ans1998/vue3-color'
  import { computed, watch, ref } from 'vue'
  const tagvisible = ref(false)
  const emit = defineEmits(['change'])
  const props = defineProps({
    // 选中的当前组件参数
    config: {
      type: Object,
      default: () => {
        return {}
      },
    },
    menus: {
      type: Array,
      required: true,
    },
  })
  const colorForm = ref({ showSketchBg: false, showSketchFont: false })
  const typeLists = ref([
    { id: 1, name: '自定义' },
    { id: 2, name: '系统功能' },
  ])
  const changSketchBg = (item: any) => {
    colorForm.value.showSketchBg = false
    console.log(item)
    if (item.isOk) {
      currentTemp.value.boxBg = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketchFont = (item: any) => {
    colorForm.value.showSketchFont = false
    console.log(item)
    if (item.isOk) {
      currentTemp.value.textColor = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketch3 = () => {
    colorForm.value.showSketchBg = true
  }
  const changSketch4 = () => {
    colorForm.value.showSketchFont = true
  }
  //背景图上传
  const onSuccessBgImage = (e: any) => {
    currentTemp.value.reloadImageUrl = e.response.data.path
    console.log(e)
  }
  const errorBgImage = (e: any) => {
    console.log(e)
    currentTemp.value.reloadImageUrl = e.response.data.path
  }
  //背景图上传
  const onSuccessBgImage2 = (e: any) => {
    currentTemp.value.outmageUrl = e.response.data.path
    console.log(e)
  }
  const errorBgImage2 = (e: any) => {
    console.log(e)
    currentTemp.value.outmageUrl = e.response.data.path
  }
  //背景图上传
  const onSuccessBgImage3 = (e: any) => {
    currentTemp.value.bgImage = e.response.data.path
    console.log(e)
  }
  const errorBgImage3 = (e: any) => {
    console.log(e)
    currentTemp.value.bgImage = e.response.data.path
  }
  const linkLists: any = computed(() => props.menus)
  const subForm = ref({
    type: 1,
    links: '',
    idx: 0,
  })
  const currentTemp = computed(() => props.config)
  console.log(currentTemp.value)
  watch(
    () => currentTemp,
    (newVal, oldVal) => {
      emit('change', newVal.value)
    },
    { immediate: true, deep: true }
  )
  //背景图上传
  const onSuccessBcg = (fileItem: any) => {
    currentTemp.value.icon1 = fileItem.response.data.path
  }
  const onSuccessBcg2 = (fileItem: any) => {
    currentTemp.value.icon2 = fileItem.response.data.path
  }
  const handleCancelTag = () => {
    subForm.value = { type: 1, links: '', idx: 0 }
    tagvisible.value = false
  }
  const chooseLink = (val: any) => {
    subForm.value.idx = val
    tagvisible.value = true
  }
  const userFormTag = ref()
  const handleBeforeOkLink = () => {
    userFormTag.value?.validate().then((error: any) => {
      if (!error) {
        if (subForm.value.idx == 0) {
          currentTemp.value.link1 = subForm.value.links
        } else if (subForm.value.idx == 1) {
          currentTemp.value.link2 = subForm.value.links
        }
        tagvisible.value = false
      }
    })
  }
</script>

<style scoped lang="less">
  :deep(.arco-upload-picture-card) {
    background: var(--color-bg-1);
  }
  :deep(.arco-collapse-item-content) {
    padding: 4px 0px;
    background: #fff;
    border: none;
    overflow: visible;
  }
  :deep(.arco-collapse-item-content-box) {
    padding: 0px 10px;
  }
  :deep(.arco-collapse-item-header) {
    border: none;
  }
  :deep(.arco-collapse-item) {
    border: none;
  }
  :deep(.arco-slider-track::before) {
    height: 4px;
  }
  :deep(.arco-slider-bar) {
    height: 4px;
  }
  :deep(.arco-collapse-item .arco-collapse-item-icon-hover) {
    position: absolute;
    top: 50%;
    left: 4px;
  }
  :deep(.arco-collapse-item-header-left) {
    padding-left: 24px;
  }
  .sliderBox_color2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
    overflow: visible;
    p {
      min-width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 30px;
      z-index: 1000000;
    }
  }
  .chooseBox {
    width: 100%;
    margin: 0px 0px 10px;
    display: flex;
    flex-wrap: wrap;
    .titles {
      width: 100%;
      display: block;
      margin-bottom: 5px;
    }
    .beizhu {
      font-size: 11px;
      color: #86909c;
      margin-top: 5px;
    }
    .radioBox {
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 4px;
      height: 35px;
      display: flex;
      align-items: center;
      padding: 0px 10px;
      box-sizing: border-box;
    }
  }
  .imageBox {
    .imageBox_item:first-child {
      margin-bottom: 10px;
    }
    .imageBox_item {
      width: 100%;
      height: 110px;
      display: flex;
      background-color: #f5f5f5;
      padding: 15px 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .rightBox {
        height: 100%;
        padding: 4px 0px 4px 10px;
        box-sizing: border-box;
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        .chooseBtn {
          padding: 0px 10px !important;
          display: flex !important;
          justify-content: flex-start !important;
          background-color: #fff !important;
          border: none !important;
          color: #86909c !important;
          .chooseText {
            margin-left: 6px;
          }
        }
        .texts {
          font-size: 12px;
          color: #1d1929;
        }
      }
    }
  }
  .sliderBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    p {
      width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
  }
  .sliderBox_color {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
    overflow: visible;
    p {
      min-width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 30px;
      z-index: 1000000;
    }
  }
  .sliderBox:last-child {
    margin-bottom: 0px;
  }
</style>
